<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-table
          :data="tableData"
          stripe
          style="width: 100%">
    <!--prop=property属性 设置数组里面对象的某个属性-->
      <!--label表示表头-->
    <el-table-column
            prop="date"
            label="日期"
            width="180">
    </el-table-column>
    <el-table-column
            prop="name"
            label="姓名"
            width="180">
    </el-table-column>
    <el-table-column
            prop="address"
            label="地址">
    </el-table-column>
      <!--slot-scope="scope"定义了一个scope变量,在此变量中保存着当前行的相关信息-->
      <!--scope.$index 得到当前行对应的下标,从0开始:0,1,2..-->
      <!--scope.row得到当前行的数据信息,通过prop属性来输出每列的数据-->
      <!--注意此处 <template必须加上 -->
      <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
      </el-table-column>
  </el-table>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v=new Vue({
        el: '#app',
        data: function() {
            return {
              tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }]
            }
        },
        methods:{
            handleEdit(index, row) {
                console.log(index, row);
                this.$message.success("编辑"+index+row.name);
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$message("删除"+index+row.address);
            }
        }
    })
</script>
</body>
</html>